<template>
    <div class="body">
        <div class="left-bar"></div>
        <div class="right-bar">
            <div class="title">
                <h1>{{ $store.getters.getSiteTitle }}</h1>
                <p style="font-size: 16px;margin-top: -3px;">
                    Jianjing Platform Center, Wishing you good health
                </p>
            </div>
            <div class="border-bg">
                <div id="in-border">
                    <h2>注册界面</h2>
                    <h3 style="font-size: 16px;margin-top: -16px;">Register screen</h3>
                    <p>手机号：<input type="text" v-model="phone"></p>
                    <p>身份证号：<input type="text" v-model="cardId"></p>
                    <p>姓名：<input type="text" v-model="name"></p>
                    <p>密码：<input type="text" v-model="pwd"></p>
                    <p>确认密码：<input type="password" v-model="surePwd"></p>
                    <p>性别：<input type="text" v-model="sex"></p>
                    <p>年龄：<input type="text" v-model="age"></p>
                    <p>验证码：<input type="text" v-model="code">
                    <img :src="codeUrl" alt="" @click="changeCode"></p>
                </div>
                
                <br>
                <el-button @click="doReg">注册</el-button>
                <el-button @click="doLogin">登录</el-button>

            </div>
        </div>


        
    </div>
</template>
<script>
export default {
    name:"registerView",
    data(){
        return {
            phone:"",
            cardId:"",
            name:"",
            pwd:"",
            surePwd:"",
            sex:"",
            age:"",
            code:"",
            codeUrl:"/userProject/code/createCode",
        }
    },
    created(){
        // console.log(this.$store)
        this.changeCode();

    },
    methods:{
        doReg(){
            // 1.校验身份证号格式和长度
            const regPsidno = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
            // 2.校验手机号格式是否正确
            const phoneRegex = /^1[34578]\d{9}$/;  
            //3.校验年龄
            const age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;//年龄是1-120之间有效
            if(this.phone == "" || this.cardId == "" || this.name==""||this.pwd==""||this.surePwd == ""||this.sex==""||this.age==""||this.code==""){
                this.$message.error("输入的内容不能为空")
            }else if(this.pwd!=this.surePwd){
                this.$message.error("两次输入的密码不一致")
            }else if(!regPsidno.test(this.cardId)){
                this.$message.error("身份证输入有误")
            }else if(!phoneRegex.test(this.phone)){
                this.$message.error("手机号输入有误")
            }else if(!age.test(this.age)){
                this.$message.error("年龄请输入1-120之间")
            }
            else{
                this.$axios.post(
                    "/patient/reg",
                    {
                        phone:this.phone,
                        cardId:this.cardId,
                        name:this.name,
                        pwd:this.pwd,
                        sex:this.sex,
                        age:this.age,
                        code:this.code
                    }
                ).then(res =>{
                    console.log(res) //拿到token
                    if(res.code == 1){
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        });  
                        this.$router.push("login")
                    }else if(res.code == 0){
                        this.$message.error("注册失败，请重新注册")
                    }else if(res.code == 2){
                        this.$message.error("验证码错误")
                        this.changeCode()
                    }else if(res.code == -1) {
                        this.$message.error("该用户信息已经注册")
                    }
                })
            }
        },
        doLogin(){
            this.$router.push("/login")
        },
        changeCode(){
            this.codeUrl = "/userProject/code/createCode?a=" + new Date().getTime()
        }
    }
}
</script>
<style scoped>
    .body{
        margin-top: -25px;
        height: 100vh;
        background-image: url("../static/img/regBg.png");
        background-size: 100% 100%;
    }
    .border-bg{
        margin: -2.5em auto 2em;
    }
    .title{
        color:rgb(44, 65, 228);
        font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
        padding: 5%;
    }
    p{
        font-size: 20px;
        /* margin:5px; */
        /* padding:0; */
        /* display: inline-block; */
        /* text-align: left; */
    }
    img{
        width: 110px;
        margin: -10px -110px 0 10px; 
        
    }
    #in-border{
        padding: 5px;
        
    }
    #in-border p{
        text-align: left;
        margin-left: 30%;
    }
    .left-bar {
        height: 100vh;
        float: left;
        width: 50%;
        height: 100vh;
        position: absolute;
        overflow: auto;
    }
    .right-bar {    
        float: right;
        right: 0px;
        width: 50%;
        height: 100%;
        position: absolute;
        overflow: auto;
    }

</style>